<template>

	<view>
		<view>
			<bg-video></bg-video>
			<cu-custom bgColor="bg-main" :isBack="true">
				<block class="text-white" slot="content">课程详细</block>
			</cu-custom>
		</view>
		<view class="bg-white">
			<view class="flex relative">
				<image v-if="akecheng.cover" class="flex-sub" :src="akecheng.cover" mode="aspectFill"></image>
				<view class="bg-red padding-sm absolute left0 bottom0">{{kczt[akecheng.zt]}}</view>
			</view>
			<view>
				<view class="padding flex justify-between">
					<text>{{akecheng.kcname}}</text>
					<button v-if="akecheng.zt == 'B'" @tap="bm" class="cu-btn bg-main round">报名</button>
				</view>
				<view v-if="akecheng.zt != 'C'" class="padding">
					<view class="text-gray text-sm flex justify-between">
						<text>{{akecheng.st}}~{{akecheng.et}}</text>
						<view class="text-gray text-sm">
							<text class="cuIcon-myfill">{{akecheng.ybrs}}</text>
							<text class="cuIcon-my margin-left-sm">{{akecheng.zxrs}}</text>
							<text class="cuIcon-friend margin-left-sm">{{akecheng.zdrs}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bg-white margin-top">
			<view class="padding solid-bottom flex bg-main justify-start align-baseline">
				<view class="text-white title">
					<text class="text-xxl  ">
						<text class="iconfont icon-jiaolianfengcaitouying"></text>
					</text>
					<text>老师</text>
				</view>
			</view>
			<view v-if="ajiaolian" class="padding">
				<view class="" @click="gotoJlDetile(ajiaolian.jlid)">
					<view class=" menu-avatar">
						<view class=" flex align-center ">
							<view v-if="ajiaolian.cover" class="cu-avatar round xl" :style="{backgroundImage: `url(${ajiaolian.cover})`}">
							</view>
							<view class="content flex-sub margin-left-sm">
								<view class="flex justify-between ">
									<view>{{ajiaolian.jlname}}</view>
								</view>
								<view class="flex justify-between align-center margin-top-xs">
									
									<uni-rate size="15" readonly="true" v-model="ajiaolian.count" max="5"></uni-rate>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="mdjl" class="padding">
				<view class="" @click="gotomdJlDetile(mdjl.mdjlid)">
					<view class=" menu-avatar">
						<view class=" flex align-center ">
							<view v-if="amdjl.cover" class="cu-avatar round xl" :style="{backgroundImage: `url(${amdjl.cover})`}">
							</view>
							<view class="content flex-sub margin-left-sm">
								<view class="flex justify-between ">
									<view>{{amdjl.mdjlname}}</view>
								</view>
								<view class="flex justify-between align-center margin-top-xs">
									<uni-rate size="15" readonly="true" v-model="amdjl.count" max="5"></uni-rate>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view v-if="akecheng.zt != 'C'" class="bg-white margin-top">
			<view class="padding solid-bottom flex bg-main justify-start align-baseline">
				<view class="text-white title">
					<text class="text-xxl  ">
						<text class="iconfont icon-yishangkekeshishu"></text>
					</text>
					<text>课程章节</text>
				</view>
			</view>
			<view class="padding-top-sm">
				<view class="cu-timeline" v-for="(kechengitem,index) in akechengitems" :key="index">
					<view class="w-100 padding-top-xs padding-bottom-xs text-main">
						<view class="flex justify-start padding-left">
							<text class="margin-right-sm">{{kechengitem.dt}}</text>
							<text>{{kechengitem.st}}</text>~
							<text>{{kechengitem.et}}</text>
						</view>

					</view>
					<view class="cu-item">
						<view :style="'background-image:url('+kechengitem.scover+'); background-size: 100% 100%;'">
							<view class="relative">
								<view class="kibackground"></view>
								<view style="z-index: 10;" class="padding-xs relative">
									<view class="cu-capsule radius">
										<view class="cu-tag bg-main">第{{index+1}}节</view>
										<view class="cu-tag bg-g-main text-main">{{kechengitem.itemname}}</view>
									</view>
									<view class="margin-top-sm">
										<view class="text-black">{{kechengitem.sname}}</view>
										<view class="margin-top-sm flex">
											<view class="cu-avatar lg round"
												:style="'background-image:url('+kechengitem.rcover+');'">

											</view>
											<view class="flex-treble flex align-center padding-left-sm text-black">
												{{kechengitem.rname}}
											</view>
										</view>
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="akecheng.zt != 'C'" class="bg-white margin-top">
			<view class="padding solid-bottom flex bg-main justify-start align-baseline">
				<view class="text-white title">
					<text class="text-xxl  ">
						<text class="cuIcon-addressbook"></text>
					</text>
					<text>介绍</text>
				</view>
			</view>
			<view class="padding-sm" v-html="akecheng.ms"></view>
		</view>

	</view>

</template>

<script>
	export default {
		data: function() {
			return {
				kczt: this.constant.kczt.KCZT,
				akecheng: {},
				akechengitems: [],
				ajiaolian: {},
				amdjl: {},
				akechenglx: {},
			}
		},
		onShareAppMessage: function(){
			return {
				title: this.store.state.title,
				path: '/pages/first?id='+this.store.state.client.clientid
			}
		},
		onLoad: function(option){
			this.akecheng.kcid = option.kcid;
			this.loadKc();
		},
		methods: {
			loadKc: function() {
				this.api("/kc/info/get").send({
					kcid: this.akecheng.kcid
				}).then(data => {
					this.akecheng = data.akecheng;
					this.akechengitems = data.kechengitems;
					this.amdjl = data.amdjl;
					this.ajiaolian = data.jiaolian;
					this.akechenglx = data.akechenglx;
				});
			},
			gotoJlDetile: function(jlid) {
				uni.navigateTo({
					url: '/pages/cxy/jl/jlxx?jlid=' + jlid
				});
			},
			gotomdJlDetile: function(mdjlid) {
				uni.navigateTo({
					url: '/pages/cxy/mdjl/jlxx?mdjlid=' + mdjlid
				});
			},
			bm: function() {
				
				if (this.store.state.client.yj == 0) {
					this.message.info("请先缴纳保证金");
					return;
				}
				
				if (!this.store.state.client.tx) {
					this.message.info("请先录入头像，否则无法完成扫脸进门");
					return;
				}
				
				if (this.akecheng.mdzy) {
					this.api("/client/zybm/info/post").send({
						clientid: this.store.state.client.clientid,
						kcid: this.akecheng.kcid,
					}).then(data => {
						if (data.aclientbm.prepayid) {
							this.pay.exePay(JSON.parse(data.aclientbm.prepaydata)).then(data => {
								this.message.confirm({
									content: "报名已提交",
									showCancel: false,
									complete: () => {
										uni.navigateBack();
									}
								});
							}).catch(err => {
								this.message.info("未完成支付");
							});
						} else {
							this.message.confirm({
								content: "报名已提交",
								showCancel: false,
								complete: () => {
									uni.navigateBack();
								}
							});
						}
					});
				} else {
					this.api("/client/bm/info/post").send({
						clientid: this.store.state.client.clientid,
						kcid: this.akecheng.kcid,
					}).then(data => {
						if (data.aclientbm.prepayid) {
							this.pay.exePay(JSON.parse(data.aclientbm.prepaydata)).then(data => {
								this.message.confirm({
									content: "报名已提交",
									showCancel: false,
									complete: () => {
										uni.navigateBack();
									}
								});
							}).catch(err => {
								this.message.info("未完成支付");
							});
						} else {
							this.message.confirm({
								content: "报名已提交",
								showCancel: false,
								complete: () => {
									uni.navigateBack();
								}
							});
						}
					});
				}
				
				
			}
		},
	}
</script>

<style>
	.kctitle {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: center;
		min-height: 100rpx;
		justify-content: start;
	}

	.kibackground {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.8);
	}
</style>